<template>
  <div class="comment-audit">
    <!-- 顶部开关 -->
    <div class="header">
      <span>商品信息</span>
      <el-switch v-model="show" @change="handleSwitchChange" />
    </div>
    <!-- 主体内容 -->
    <div class="main-content">
      <!-- 内容区域 -->
      <div class="content-list">
        <div
          v-for="comment in currentList"
          :key="comment.id"
          class="comment-item">
          <!-- 商品图片 -->
          <div class="left">
            <img
              :src="comment.goodPic"
              alt="" />
          </div>
          <!-- 商品内容 -->
          <div class="right">
            <div class="comment-content">
              <div class="username">{{ comment.username }}</div>
              <div class="content">
                {{ comment.content }}
              </div>
            </div>
            <!-- 操作区域 -->
            <div class="action-area">
              <span class="time">{{ formatTime(comment.createTime) }}</span>
              <!-- <el-dropdown @command="handleCommand($event, comment)">
              <span class="el-dropdown-link">
                <el-icon><more-filled /></el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item
                    v-if="activeTab === 'pending'"
                    command="hide">
                    隐藏
                  </el-dropdown-item>
                  <el-dropdown-item command="show"> 显示 </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown> -->
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts" name="FGoodsList">
// FGoodsList 组件用于显示直播商品列表
import { ref, computed, onMounted, onUnmounted } from 'vue'
import { ElSwitch } from 'element-plus'
import { Goods } from '../types/zhibo'

const activeTab = ref<string>('pending')
const pendingComments = ref<Goods[]>([])
const hiddenComments = ref<Goods[]>([])

const show = ref(true)

const emit = defineEmits(['close'])

const tabs = [
    { label: '待审核', value: 'pending' },
    { label: '已隐藏', value: 'hidden' }
]

// WebSocket 连接
let ws: WebSocket | null = null

onMounted(() => {
    // initWebSocket()
    initSampleData()
})

onUnmounted(() => {
    ws?.close()
})

const initSampleData = () => {
    pendingComments.value = [
        {
            id: '1',
            username: '吗喽',
            content:
        '这是一只吗喽，用于展示多行文本的显示效果。当内容超过两行时应该出现省略号，请注意观察文本截断情况。',
            createTime: new Date().setMinutes(new Date().getMinutes() - 5),
            status: 'pending',
            goodPic: 'https://picb3.photophoto.cn/13/711/13711563_1.jpg'
        },
        {
            id: '2',
            username: '吗喽',
            content: '这是一只吗喽',
            createTime: new Date().setHours(new Date().getHours() - 2),
            status: 'pending',
            goodPic: 'https://picb3.photophoto.cn/13/711/13711563_1.jpg'
        }
    ]

    hiddenComments.value = [
        {
            id: '3',
            username: '用户王五',
            content: '这条评论已被隐藏，应该在已隐藏标签页显示',
            createTime: new Date().setDate(new Date().getDate() - 1),
            status: 'hidden',
            goodPic: 'https://picb3.photophoto.cn/13/711/13711563_1.jpg'
        }
    ]
}

const initWebSocket = () => {
    ws = new WebSocket('wss://wss.fastht.com/wss')

    ws.onmessage = (event) => {
        const data: Goods = JSON.parse(event.data)
        if (data.status === 'pending') {
            pendingComments.value.push(data)
        } else {
            hiddenComments.value.push(data)
        }
    }
}

// 当前显示列表
const currentList = computed(() => {
    return activeTab.value === 'pending'
        ? pendingComments.value
        : hiddenComments.value
})

// 处理操作命令
const handleCommand = async (command: 'show' | 'hide', comment: Goods) => {
    try {
        if (command === 'hide') {
            await callHideApi(comment.id)
            pendingComments.value = pendingComments.value.filter(
                (c) => c.id !== comment.id
            )
            hiddenComments.value.push({ ...comment, status: 'hidden' })
        } else {
            await callShowApi(comment.id)
            pendingComments.value = pendingComments.value.filter(
                (c) => c.id !== comment.id
            )
            hiddenComments.value = hiddenComments.value.filter(
                (c) => c.id !== comment.id
            )
        }
    } catch (error) {
        console.error('操作失败:', error)
    }
}

// 时间格式化
const formatTime = (timestamp: number) => {
    return new Date(timestamp).toLocaleTimeString()
}

const callHideApi = async (id: string) => {
    // 调用隐藏接口
}

const callShowApi = async (id: string) => {
    // 调用显示接口
}

const handleSwitchChange = (val: any) => {
    emit('close', val)
}
</script>

<style lang="scss" scoped>
.comment-audit {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
  height: 100vh;
}

.header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 4px 16px;
  border-bottom: 1px solid #eee;
}

.nav-bar {
  display: flex;
  justify-content: space-evenly;
  gap: 24px;
  padding: 5px 16px;
  border-bottom: 1px solid #eee;
}

.nav-item {
  cursor: pointer;
  padding: 8px 0;
  position: relative;
}

.nav-item.active {
  color: #3b76f6;
}

.nav-item.active::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: #3b76f6;
}

.comment-item {
  padding: 16px;
  border-bottom: 1px solid #eee;
  .left {
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
    text-align: center;
    img {
      width: 100px;
      height: 100px;
      border-radius: 20px;
    }
  }
}

.comment-content {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.username {
  font-weight: 500;
  color: #333;
  text-align: center;
  margin: 5px 0 10px 0;
}

.content {
  color: #797979;
}

.action-area {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
}

.time {
  color: #999;
  font-size: 12px;
}

.el-dropdown-link {
  cursor: pointer;
  padding: 4px;
}
</style>
